<template>
	<view>
		<ul class="personal">
			<li class="flex justify-between items-center">
				<view>头像</view>
				<view class="avatar"><image class="img border-25" :src="distribution.avatar" mode=""></image></view>
			</li>
			<li class="flex justify-between items-center">
				<view>昵称</view>
				<view>{{distribution.nickname}}</view>
			</li>
			<li class="flex justify-between items-center">
				<view>手机号</view>
				<view>{{distribution.phone_number}}</view>
			</li>
			<li class="flex justify-between items-center">
				<view>分销等级</view>
				<view>{{distribution.grade_name}}</view>
			</li>
			<li class="flex justify-between items-center">
				<view>佣金比例</view>
				<view>{{distribution.proportion | commissionRate}}%</view>
			</li>
			<li class="flex justify-between items-center">
				<view>加入日期</view>
				<view>{{distribution.add_time}}</view>
			</li>
		</ul>
	</view>
</template>

<script>
export default {
	data() {
		return {
			distribution:''
		}
	},
	filters:{
		commissionRate(val){
			if(val){
				return (val*100).toFixed(2)
			}
		}
	},
	mounted(){
          try{
          	let distribution = uni.getStorageSync('distribution');
			if(distribution){
				this.distribution = JSON.parse(distribution)
			}
			console.log('distribution',)
          }catch(e){
          	//TODO handle the exception
          }
		
	},
	methods: {

	}
}
</script>

<style lang="less">
@import '@/common/index.less';
.personal {
	box-sizing: border-box;
	padding: 0 10rpx;
	border-top: 1px solid #f6f6f6;
	.avatar {
		width: 80rpx;
		height: 80rpx;
	}
	li {
		padding: 10rpx;
		height: 80rpx;
		border-bottom: 1px solid #f6f6f6;
		& > view:nth-child(2) {
			color: @gray;
		}
	}
}
</style>
